<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<#assign base=request.contextPath  />

<title>字典表</title>
<base id="basePath" href="${base}">
    <link rel="stylesheet" href="${base}/css/demo.css" type="text/css">
    <link rel="stylesheet" href="${base}/css/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="${base}/js/ztree/jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="${base}/js/ztree/jquery.ztree.core.js"></script>
    <script type="text/javascript" src="${base}/js/zhang.js"></script>
    <script type="text/javascript" src="${base}/js/ztree/jquery.ztree.excheck.js"></script>
    <script type="text/javascript" src="${base}/js/ztree/jquery.ztree.exedit.js"></script>
<link rel="stylesheet" href="${base}/frame/layui/css/layui.css?t=1534970980648" media="all">
		 <style type="text/css">
         		.layui-btn-radius{
                 			border-radius: 5px;
                 		}
         		</style>
</head>
<body>
<table style="text-align:center">
    <tr>
            <td><ul id="tree" class="ztree" style="width:600px;color:#666666; background-color:white;"></ul></td>


        <td style="width:600px;">
         <div class="layui-form-item">
        <div class="layui-inline">
                           <label class="layui-form-label" >请输入code</label>
                               <div class="layui-input-inline">
                                     <input  id="code"  autocomplete="off" class="layui-input" type="text">
                               </div>
                       </div><br/>
        <div class="layui-inline">
                                   <label class="layui-form-label" >请输入name</label>
                                       <div class="layui-input-inline">
                                             <input id="name"  autocomplete="off" class="layui-input" type="text">
                                       </div>
                               </div>
             </div>

         <div class="layui-form-item">
         <div class="layui-inline">
            <button class="layui-btn  layui-btn-radius" style="background-color: #0092EF;" type="button"  onclick="insert()">添加</button>
            <button class="layui-btn layui-btn-primary layui-btn-radius" type="button"  onclick="delet()">删除</button></br>
                        <p style="color: red" id="ztreeMSG"></p>
          </div>
          </div>
        </td>
    </tr>
</table>




</body>

<script>
    var zTreeObj,
            setting = {

                view: {
                    selectedMulti: false,
                    showLine: true,
                    dblClickExpand: false
                },

                callback: {
                    //回调函数 默认展开节点
                    onAsyncSuccess:
                            function(){
                                var treeObj = $.fn.zTree.getZTreeObj("tree");
                                treeObj.expandAll(true);
                            },
                    onDblClick: zTreeOnDblClick
                } ,
                async: {
                    enable: true,
                    url: "${base}/ptDic/selectDic"
                } ,
                data:{
                    simpleData : {
                        enable : true,
                        idKey : "id",
                        pIdKey : "pId",
                        rootPid : 0
                    }
                },
                check:{
                    enable: true,
                    chkStyle: "radio",
                    radioType:"all",
                    chkboxType: { "Y": "s", "N": "p" }
                }

            };


 /*   function zTreeOnClick(event, treeId, treeNode) {
        layer.msg(treeNode.tId + ", " + treeNode.id);

    }*/

//初始化树
    zTreeObj = $.fn.zTree.init($("#tree"), setting );

    //删除节点
    function delet(){


        var flag=confirm("确定删除吗？该操作不可撤销");
        if(flag==false){
            return
        }else {

            var id=getAllID("tree");
            $.ajax({
                type : "POST", //提交方式
                url : "${base}/ptDic/deletById",//路径
                data :{id:id},
                success : function(data) {//返回数据根据结果进行相应的处理
                    var treeObj = $.fn.zTree.getZTreeObj("tree");
                    treeObj.expandAll(false);//折叠全部节点,参数为true时表示展开全部节点
                    //初始化树
                    zTreeObj = $.fn.zTree.init($("#tree"), setting);
                      layer.msg(data);

                }
            });
        }

    }
    //新增方法    把获取到的id当作节点父id 传参
    function insert(){
        var id=getAllID("tree");
        $.ajax({
            type : "POST", //提交方式
            url : "${base}/ptDic/insertDic",//路径
            data :{parentId:id,code:$("#code").val(),name:$("#name").val()},
            success : function(data) {//返回数据根据结果进行相应的处理
                var treeObj = $.fn.zTree.getZTreeObj("tree");
                treeObj.expandAll(false);//折叠全部节点,参数为true时表示展开全部节点
                //初始化树
                zTreeObj = $.fn.zTree.init($("#tree"), setting);
                layer.msg(data);

            }
        });
    }

    function zTreeOnDblClick(){
        //获取树对象
        var treeObj = $.fn.zTree.getZTreeObj("tree");
        //得到鼠标选中的节点 ztree标准数据
        var nodes = treeObj.getSelectedNodes();
        //得到节点id
            var id=nodes[0].id;
        $.ajax({
            type : "POST", //提交方式
            url : "${base}/ptDic/selectDicById",//路径
            data :{id:id},
            success : function(data) {//返回数据根据结果进行相应的处理

            $("#ztreeMSG").html("当前选择项:</br>"+"名称为："+data.name+"</br>code码为："+data.code+"</br>创建时间为："+changeDateFormat(data.createTime))
            }
        });
    }
</script>
</html>